@charset "utf-8";
$font-size:20px;
@function s($px) {
    @return $px/$font-size*(375/640)*1rem;
}

.web {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../images/beijingX.png) round;
    .music {
        color: #e7c598;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 30px;
        z-index: 999;
    }
    .icon-yinle1{
        animation: music 5s linear infinite;
    }
    /**************动画效果**************/
        @-webkit-keyframes music{
            from{transform:  rotate(0);}
            to{transform: rotate(360deg);}
        }
        @keyframes music{
            from{transform: rotate(0);}
            to{transform: rotate(360deg);}
        }
    /****内容****/
    .content {
        position: absolute;
        width: 70%;
        height: 450px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        .logo {
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            &>img {
                width: 160px;
            }
        }
        /****标题****/
        .title {
            margin-top: 40px;
            .title-font {
                text-align: center;
                margin: 0 auto;
                font-family: "宋体";
                font-size: 55px;
                color: #e7c598;
                letter-spacing: 5px;
            }
        }
        /****底部按钮****/
        .buttom {
            position: absolute;
            bottom: 5px;
            width: 100%;
            //按钮
            .btn {
                color: #e2ac88;
                display:block;
                margin: 0 auto;
                text-align: center;
                margin-top: 25px;
                width: 240px;
                .btnfont {
                    width: 100%;
                    box-sizing: border-box;
                    background: url(../images/kuang.png) round;
                    background-size: cover;
                    padding: 5px 5px;
                    font-size: 14px;
                    margin: 0 auto;
                    letter-spacing: 5px;
                }
            }
        }
    }
    /****弹出层****/ 
    .shade{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.7);
        display: none;
        .frame{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #e7c598;
            width: 70%;
            height: 180px;
            border-radius: 8px;
            text-align: center;
            box-sizing: border-box;
            box-shadow: 3px 3px 6px #000;
            padding-top: 30px;
            .quxiao{
                color: #bf0c21;
                display: block;
                font-size: 28px;
                position: absolute;
                right: 5px;
                top: 5px;
            }
            .font{
                font-size: 18px;
                color: #bf0c21;
                line-height: 28px;
            }
            .shuru{
                display: inline-block;
                margin-top: 20px;
                width:60%;
                height:28px;
                border-radius: 6px;
                background: #bf0c21;
                color: #e7c598;
                -webkit-appearance: none;
                box-shadow: 1px 2px 5px #000;
                font-size: 12px;
                line-height: 28px;
                letter-spacing: 4px;
            }
        }
    }
}

/*****************iphone5设配*****************/
@media (min-width: 320px) and (max-width:374px){
    .web .content{
        height: 400px;
    }
    .web .content .title .title-font{
        font-size: 48px;
    }
    .web .content .buttom .btn{
        width: 85%;
        font-size: 13px;
        letter-spacing: 3px;
    }
}

/*****************iphone6p*****************/
@media (min-width:414px) {
    .web .content .title .title-font{
        font-size: 65px;
    }
    .web .content .buttom .btn .btnfont{
        font-size: 16px;
    }
    .web .content .buttom .btn{
        width: 250px;
    }
}